import React from 'react';
import { Row, Col} from 'antd';


import Utils from '@utils/utils.js';
import Request from '@utils/request.js';

import './header.scss';

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sysTime: '0000-00-00 00:00:00',
      weather: null
    };
  }

  componentWillMount() {
    setInterval(() => {
      let sysTime = Utils.formatDate( new Date().getTime() );
      this.setState({
        sysTime
      });
    },1000);
  }

  componentDidMount() {
    let city = '北京';
    Request.BdWeather({
      url: `http://api.map.baidu.com/telematics/v3/weather?location=${encodeURIComponent(city)}&output=json&ak=3p49MVra6urFRGOT9s8UBWr2`
    }).then(res => {
      this.setState(
        res[0].weather_data[0]
      )
    }, err => {
      console.log('天气请求出错：', err);
    });

  }

  render() {
    let state = this.state;
    let pic = state.sysTime.length ? (state.sysTime.slice(11, 13) - 0 > 18 ? 'nightPictureUrl' : 'dayPictureUrl') : 0;

    return (
      <div className="header-component">
        <Row className="header-top">
          <Col span="24" className="user-msg">
            <span className="user-name">欢迎, wfy</span>
            <span className="logout-btn">退出</span>
          </Col>
        </Row>

        <Row className="brackcrumb">
          <Col span="4" className="brackcrumb-title">首页</Col>
          <Col span="20" className="weather">
            <div className="today-date">{this.state.sysTime}</div>
            <div className="weather-detail">
              <img src={state[pic]||''} alt="" className="weather-img"/>
              <span>{`${state.weather||''} ${state.wind||''} ${state.temperature||''}`}</span>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}